<template>
  <div class="menu-container">
    <Menu theme="dark" width="280px" :active-name="active">
      <menu-item name="home" to="home">
        <Icon type="md-home"/>
        首页
      </menu-item>
      <Submenu v-for="(item,index) in menu" :key="index" :name="item.link">
        <template slot="title">
          <Icon :type="item.icon"/>
          {{ item.name }}
        </template>
        <menu-item v-for="(child,i) in item.children" :name="child.link" :key="i" :to="child.link">{{ child.name }}
        </menu-item>
      </Submenu>
    </Menu>
  </div>
</template>

<script>
export default {
  name: "LeftSider",
  data() {
    return {
      active: 'home',
      menu: [
        // {
        //   name: '用户管理', icon: 'ios-paper', link: '/person', children: [
        //     {name: '用户数据', icon: 'ios-paper', link: '/person/user'},
        //     {name: '工人数据', icon: 'ios-paper', link: '/person/worker'}
        //   ]
        // },
        // {
        //   name: '材料管理', icon: 'ios-paper', link: '/goods', children: [
        //     {name: '商品管理', icon: 'ios-paper', link: '/goods/list'},
        //     {name: '分类管理', icon: 'ios-paper', link: '/goods/type'}
        //   ]
        // },
        // {
        //   name: '运营管理', icon: 'ios-paper', link: '/operate', children: [
        //     {name: '卡券列表', icon: 'ios-paper', link: '/operate/ticketList'},
        //     {name: '发送记录', icon: 'ios-paper', link: '/operate/ticketRecord'}
        //   ]
        // },
        // {
        //   name: '商业管理', icon: 'ios-paper', link: '/business', children: [
        //     {name: '订单列表', icon: 'ios-paper', link: '/business/order'},
        //     {name: '售后管理', icon: 'ios-paper', link: '/business/refund'}
        //   ]
        // },
        // {
        //   name: '广告管理', icon: 'ios-paper', link: '/adver', children: [
        //     {name: '轮播图设置', icon: 'ios-paper', link: '/adver/adver'}
        //   ]
        // },
        // {
        //   name: '项目管理', 'icon': 'ios-paper', link: '/project', children: [
        //     {name: '项目列表', icon: 'ios-paper', link: '/project/list'}
        //   ]
        // },
        // {
        //   name: '参数配置', 'icon': 'ios-paper', link: '/params', children: [
        //     {name: '车型参数', icon: 'ios-paper', link: '/params/vehicle'}
        //   ]
        // },
        // {
        //   name: '权限管理', icon: 'ios-paper', link: '/authority', children: [
        //     {name: '用户权限', icon: 'ios-paper', link: '/authority/user'}
        //   ]
        // },
        // {
        //   name: '日志管理', icon: 'ios-paper', link: '/log', children: [
        //     {name: '日志记录', icon: 'ios-paper', link: '/log/log'},
        //   ]
        // }
      ]
    }
  },
  beforeMount() {
    this.getUserMenu()
  },
  methods: {
    getUserMenu() {
      let that = this;
      that.$http.get('/account/menu?uid=1').then(res => {
        that.dispose(res)
      }).catch(() => {
        that.menu = []
      })
    },
    dispose(data) {
      // 示例数据 "menuId":1,"menuName":"用户管理","menuUrl":"/person","menuFullInfo":"用户数据@/person/user_工人数据@/person/worker"
      let menu = []
      let menuIdArray = []
      for (let item of data) {
        let temp = {}
        menuIdArray.push(item.menuId)
        temp.name = item.menuName
        temp.icon = item.menuIcon
        temp.link = item.menuUrl
        temp.children = []
        if (item.menuFullInfo.includes("_")) {
          let menuChildren = item.menuFullInfo.split("_")
          for (let str of menuChildren) {
            let info = str.split("@");
            let childTemp = {}
            childTemp.name = info[0]
            childTemp.icon = "ios-paper"
            childTemp.link = info[1]
            temp.children.push(childTemp)
          }
        } else {
          let info = item.menuFullInfo.split("@");
          let childTemp = {}
          childTemp.name = info[0]
          childTemp.icon = "ios-paper"
          childTemp.link = info[1]
          temp.children.push(childTemp)
        }
        menu.push(temp)
      }
      this.menu = menu
      window.sessionStorage.setItem("menuArray", menuIdArray)
    }
  }
}
</script>

<style scoped>
.menu-container {
  width: 100%;
  height: calc(100vh - 70px);
  overflow-y: auto;
}
</style>
